let content = document.querySelector('.content')

let box = document.querySelector('#app')


let btn = document.querySelector('.next_btn')

btn.addEventListener('click', function(e) {
    getData()
    e.stopPropagation()
})

box.addEventListener('click', function(e) {
    createRipple(e.x, e.y)
    setTimeout(() => {
        createRipple(e.x, e.y)
    }, 200);
    setTimeout(() => {
        createRipple(e.x, e.y)
    }, 400);
})

// 创建波纹 left:鼠标距离页面左边的距离 top:鼠标距离页面上边的距离  delay:定时器延时  opacity：扩散递减的透明度  styleOpt 波纹的样式
function createRipple(left, top, styleOpt, delay = 50, opacity = 0.05, ) {
    let style = {
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        opacity: 1,
        border: '1px solid skyblue',
        ...styleOpt,
        position: 'fixed',
        pointerEvents: 'none'

    }

    style.left = (left - parseInt(style.width) / 2) + 'px'
    style.top = (top - parseInt(style.height) / 2) + 'px'


    // 创建波纹盒子 让盒子居中在鼠标中心
    let box = document.createElement('div')

    for (const key in style) {
        box.style[key] = style[key]
    }

    document.body.appendChild(box)


    // 波纹扩散效果

    let timer = setInterval(() => {
        box.style.opacity = box.style.opacity - opacity;
        box.style.width = parseInt(box.style.width) + parseInt(style.width) + 'px'
        box.style.height = parseInt(box.style.height) + parseInt(style.height) + 'px'
        box.style.left = parseInt(box.style.left) - (parseInt(style.width) / 2) + 'px'
        box.style.top = parseInt(box.style.top) - (parseInt(style.height) / 2) + 'px'

        if (box.style.opacity <= 0) {
            clearInterval(timer)
            box.parentNode.removeChild(box)
        }
    }, delay)
}


async function getData() {
    let config = {
        headers: {
            Accept: 'application/json',
        },
    }

    const res = await fetch('https://icanhazdadjoke.com', config)

    let data = await res.json()

    content.innerHTML = data.joke
}

getData()